<template>
  <div class="detail">
    <div class="d-top">
      <div class="top-left">
        <h3 class="title">{{ datas[number].title }}</h3>
        <p class="phase">
          {{ datas[number].part1 }}
        </p>
      </div>
      <div class="top-right">
        <img :src="src" />
      </div>
    </div>
    <div class="d-bottom">
      <div class="bottom-left">
        <img :src="src" />
      </div>
      <div class="bottom-right">
        <p class="phase">
          {{ datas[number].part2 }}
        </p>
      </div>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "../assets/image/1.jpg";
import img2 from "../assets/image/2.jpg";
import img3 from "../assets/image/3.jpg";
import img4 from "../assets/image/4.png";
import img5 from "../assets/image/5.jpg";
import img6 from "../assets/image/6.jpg";
import img7 from "../assets/image/7.jpg";
import img8 from "../assets/image/8.jpg";
import img9 from "../assets/image/9.jpg";
import img10 from "../assets/image/10.jpg";
let datas = [
  {
    title: "自主定位导航技术",
    part1: `自主定位导航技术是实时定位、自主地图构建和运动规划与控制技术的统称。它可帮助机器人在非结构化的环境中无需人工参与而自主地移动完成既定的任务。通俗来说，就是解决机器人“我在哪里”、“我要到哪里去”以及“我该如何过去”这三大问题。正因为其重要性，自主定位导航技术一直以来都是行业内的研究发展重点。除了机器人行业，它也是无人驾驶汽车行业的关键性技术之一。`,
    part2: `目前，应用于自主移动机器人的导航定位技术有很多，归纳起来主要有以下几种：视觉导航定位、光反射导航定位、GNSS卫星定位系统、超声波导航定位。典型的光反射导航定位方法主要是利用激光或红外传感器来测距。GNSS卫星定位系统简单说就是利用空间距离后方交汇，求解出当前点在坐标系(WGS84)下的绝对位置，前提是必须用户必须接受到大于等于4颗卫星信号。
         `,
  },
  {
    title: "灵活的扩展能力技术",
    part1: `智能控制方法提高了机器人的速度及精度；丰富的软硬件接口，灵活的API，方便进行灵活多样的二次开发，实现人机之间的友好交互和沟通。 这些关键性技术让机器人拥有更强大的 感知 、 识别 、 理解 、 判断、行动、交互、规划 等能力，让机器人在实际作业的过程中拥有更强的自主性和环境适应性 ，真正做到智能。这已经在商场、办公楼、机场、展览馆、酒店、医院、营业厅、安保安防 等领域得到广泛应用，未来，将会进一步进军更多领域。
    `,
    part2: `目前，服务机器人期望售价在2000元左右，但传统工业激光雷达产品的售价达到12000元左右，大大超出用户心理预期。想要控制机器人整体售价，让机器人得到应用和普及，肯定要考虑传感器低成本问题。思岚科技RPLIDAR 系列雷达，在批量模式下可以把雷达成本控制在几百元，帮助机器人实现成本控制。机身厚度仅为4cm，可以应用到更多对机身要求更为紧凑的机器人中去。
`,
  },
  {
    title: "人机交互技术",
    part1: `人机交互是一个多学科交叉，专注于人与计算机相关科技互动的研究和实践领域。人机交互的主要目的是学习和了解人，也就是计算机用户，预测他们到底为什么要和机器进行互动，根据这个信息和判断，来研发科技和工具，提供给人可以高效操作的系统，最终让人可以舒服、高效、安全的来跟机器实现互动，达到人的初始目标。人机交互简单来说，就是“人和机器打交道的方式”。人和计算机打交道根源于人类把计算机当成一种有效的计算服务工具。
`,
    part2: `协同智能的时代是非常美好的，在未来机器低成本的，利用NIRO人机交互的设备，可以让机器人产品快速进入智能时代。在科技发展每一个阶段，都会出现一些代表性的产品，比如PC可以作为游戏机、打字机，比如手机可以作为指南针、MP3、照相机，而在人工智能时代我们认为这个产品是机器人。机器人与前者们出现的逻辑极其相似，都是以技术为基础，并且通过技术设计人机交互模型，将人机交互模型应用到更多产品。比如说应用了触屏的技术，打造了交互模型，将交互模型应用到平板电脑、手机、桌面型的设备才造成移动端的繁重。

`,
  },
  {
    title: "机器人发展历程",
    part1: `自20世纪60年代初研制出尤尼梅特和沃莎特兰这两种机器人以来，机器人的研究已经从低级到高级经历了三代的发展历程。程序控制机器人（第一代）：第一代机器人是程序控制机器人，它完全按照事先装入到机器 人存储器中的程序安排的步骤进行工作。自适应机器人（第二代）：第二代机器人的主要标志是自身配备有相应的感觉传感器，如视 觉传感器、触觉传感器、听觉传感器等，并用计算机对其进行控制。智能机器人（第三代）：这是指具有类似于人的智能的机器人，即它具有感知环境的能力，配备有视觉、听觉、触觉、嗅觉等感觉器官。`,
    part2: `  1956年 美国人乔治·德沃尔制造出世界上第一台可编程的机器人，并注册了专利。1959年 德沃尔与美国发明家约瑟夫·英格伯格联手制造出第一台工业机器人。1962年 美国AMF公司生产出“VERSTRAN”（意思是万能搬运），与Unimation公司生产的Unimate一样成为真正商业化的工业机器人。1969年 日本早稻田大学加藤一郎实验室研发出第一台以双脚走路的机器人。2006年 6月，微软公司推出Microsoft Robotics Studio，机器人模块化、平台统一化的趋势越来越明显。`,
  },
  {
    title: "机器人云服务技术",
    part1: `随着社会老龄化、公共安全事件以及教育医疗对服务机器人的需求旺盛，服务机器人需求急剧增长，然而服务机器人想要真正迈入家庭生活和服务环境，进而更好的融入人类社会，其应能尽可能满足人们日常需求。为了能够更加全面、准确的为人类服务，引进先进的技术对服务机器人进行创新，但是仍存在一系列问题，目前，对于服务机器人系统，结构复杂、不易于实现和可靠性不高。`,
    part2: `机器人云服务技术指机器人本身作为执行终端，通过云端进行存储与计算，即时响应需求和实现功能，有效实现数据互通和知识共享，为用户提供无限扩展、按需使用的新型机器人服务方式。
卓源科技专注于智慧建筑领域发展，兼顾智慧医疗、智慧管廊、智慧农业等领域，坚持“以人为本”的建设理念，注重智能化项目与城市环境、人文相结合，聚焦于智慧城市顶层规划，依托多年来在智慧城市领域的经验和优势，致力于为客户提供全方位高品质的专业服务，为打造智慧城市、建设魅力中国贡献力量。`,
  },
  {
    title: "液态金属技术",
    part1: `所谓液态金属，既可以是像水一样的流体，也可以是固体；既是导体，也可以转换成其他性质材料。比如，源于刘静小组的工作表明，液态金属可以注射入人的身体里固化作为骨骼。在理想状态下，即便人体内极为脆弱的神经断了，未来科学家也可以应用液态金属把断了的神经连起来。可以说，液态金属孕育着许多前瞻性、前沿性的应用。“科学研究存在不确定性，但又有必然性。坚持不懈，就会在合适的时机实现跨越，科学青睐有准备的头脑说的就是这个道理。”谈起多年来实验室在液态金属领域取得的系列发现，刘静不无感慨。
`,
    part2: `“未来的机器人，一定是高度灵活、智能、柔性化的。”刘静认为，液态金属机器领域大有可为，可望促成全新机器人的研制，他为此将实验室任务定为SMILE计划（取Soft Machine based on Intelligence, Liquid Metal and Electronics缩写之意），以期结合智能、液态金属和电子构筑未来柔性机器。但他同时也表示，目前，相应机器的研究还“刚刚开始”。“就像人一样，必须有细胞、组织才能构成皮肤，还需要血液、骨架、神经等等，构筑液态金属机器的每一步都需要非常多的积累。

`,
  },
  {
    title: "书法",
    part1: `智能春联活动是越疆科技联合央视网、百度、同道大叔为全国人民免费赠送5000份由嘟宝特（DOBOT魔术师）机械臂书写的春联。智能春联智能在何处？首先，用户可以在央视网和同道大叔提供的H5上，通过百度提供的人工智能技术，输入关键词生成专属春联内容。然后，由越疆科技为成功参与活动的用户定制智能春联并寄发给用户，这5000份智能春联均由越疆科技的桌面级智能机械臂“嘟宝特”（DOBOT魔术师）自动书写完成。嘟宝特书写春联是中华传统习俗和前沿科技相结合的成功案例，将科技元素融入传统文化习俗之中，增加科技趣味性的同时创新传统文化的传承方式。`,
    part2: `  李克强总理曾寄语越疆科技：“来自于创客，服务于教育，你们（越疆科技）要带头把机器人教育普及起来”，越疆科技不仅深耕机器人教育领域，用实际行动践行总理的嘱托，更是大力普及机器人知识，缩短人工智能等前沿科技与普通生活的距离。
嘟宝特（DOBOT魔术师）是越疆科技推出的高精度桌面级智能机械臂，可广泛应用于教育、轻工业、创客等领域。嘟宝特具备标准化的末端工具，可实现3D打印、写字画画、激光雕刻等多种功能。开放性的嘟宝特机械臂支持用户进行二次开发，适配不同的配件，拓展更多的应用场景。本次智能春联活动，就是越疆科技搭配其自主研发的配件导轨，扩展了机械臂的工作范围，使其能够书写春联，将前沿科技与传统文化相结合。
`,
  },
  {
    title: "皮影",
    part1: `皮影戏机器人如今已经是第三代了，从第一代开始的只能左右平移，到现在可以前后左右的多方位移动操作，甚至两个皮影人偶可以相互调换位置，或在空中翻跟头等，如今的这个机器人，灵活性已经不输给人手的操作。今年，机器人研发团队的大学生们也都面临着毕业，但他们的梦想并不会因此而中断。孙其功告诉记者，他们现在已经把更多的古老艺术与现代技术相结合，在团队的研发下，糖画、沙画、剪纸窗花等软件程序已经逐步应运而生，相信将来会有更多的机器人能够熟练掌握这些传统的古老技艺，用另一种形式的表演，把中国的传统文化传承下去。`,
    part2: `皮影表演机器人整体结构设计方便流动演出，“无绳”的设计方案简洁美观；人性化的上位机平台使整个作品易于操作；通过结构的改进，解决了以往皮影表演机器人面临的皮影人物无法换位，数量不能变动的缺点；融入先进的Kinect体感人机交互技术提升用户体验度，使得观众不仅能够用眼睛看，而且还可以自己亲身感受皮影戏所带来的魅力。而机器人自带的wifi下载剧目的功能，让用户能够随时更新剧目、享受到高科技带来的视听愉悦！`,
  },
  {
    title: "木偶机器人",
    part1: `木偶戏是中国传统艺术之一，已有 2000多年的历史。2006年，木偶戏经国务院批准列入第一批国家级非物质文化遗产名录。我国北方以杖头木偶居多，传统的杖头木偶像人一般高 ；南方提线木偶和布袋木偶较多。不用人工操纵，木偶就能跟随背景音乐和旁白解说进行各种动作变换。借助3D打印、芯片植入等现代科技，山东济南木偶戏传承人李秀平创造“木偶机器人”，助推非遗传承创新，让更多人了解木偶文化、读懂中国非遗故事。`,
    part2: `传统木偶的头、身子等大多用木头制作和雕刻而成，且部分木偶体积较大。李秀平及其团队先后用面塑、3D 打印技术制作木偶的头部，木偶重量就此减轻 ；其内核为植入芯片的机器人，可根据剧情自主进行动作转换，减少人工操作环节，对木偶表演者的技艺要求大大降低。希望未来现场版的木偶剧演出能和电影一样普及，走遍社区、学校、乡村，让更多观众欣赏到木偶戏，更好地讲述中国故事，让更多人了解非遗文化、中国文化`,
  },
  {
    title: "发展历程",
    part1: `木偶戏是中国传统艺术之一，已有 2000多年的历史。2006年，木偶戏经国务院批准列入第一批国家级非物质文化遗产名录。我国北方以杖头木偶居多，传统的杖头木偶像人一般高 ；南方提线木偶和布袋木偶较多。不用人工操纵，木偶就能跟随背景音乐和旁白解说进行各种动作变换。借助3D打印、芯片植入等现代科技，山东济南木偶戏传承人李秀平创造“木偶机器人”，助推非遗传承创新，让更多人了解木偶文化、读懂中国非遗故事。`,
    part2: `传统木偶的头、身子等大多用木头制作和雕刻而成，且部分木偶体积较大。李秀平及其团队先后用面塑、3D 打印技术制作木偶的头部，木偶重量就此减轻 ；其内核为植入芯片的机器人，可根据剧情自主进行动作转换，减少人工操作环节，对木偶表演者的技艺要求大大降低。希望未来现场版的木偶剧演出能和电影一样普及，走遍社区、学校、乡村，让更多观众欣赏到木偶戏，更好地讲述中国故事，让更多人了解非遗文化、中国文化`,
  },
];
export default {
  name: "Detail",
  data() {
    return {
      src: img1,
      imgsArr: [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10],
      datas,
      number: 0,
    };
  },
  mounted() {
    const id = +this.$route.params.id;
    this.src = this.imgsArr[id];
    this.number = id;
  },
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  .d-top {
    display: flex;
    height: 50%;
    .top-left {
      padding: 4rem 6rem;
      width: 50%;
      background: #313234;
      color: #fff;
    }
    .top-right {
      width: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .d-bottom {
    display: flex;
    height: 50%;
    .bottom-right {
      padding: 4rem 6rem;
      width: 50%;
      background: #313234;
      color: #fff;
    }
    .bottom-left {
      width: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.title {
  text-align: center;
  font-size: 2.5rem;
}
.phase {
  margin-top: 1rem;
  line-height: 2.1;
  font-size: 1.5rem;
  span {
    padding-left: 2rem;
  }
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  perspective: 800px;
  z-index: 2;
}

button {
  margin-right: 20px;
  width: 60px;
  height: 50px;
  background: rgba(100, 206, 206);
}

.wrapper div {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
  transition: all 5s;
  backface-visibility: hidden;
}

.wrapper .wrap {
  position: absolute;
  top: 500px;
}

.container {
  transform-style: preserve-3d;
  animation: loop 5s linear infinite;
}

@keyframes loop {
  from {
    transform: rotateX(30deg) rotateY(30deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.div1 {
  background: url("../assets/image/1.jpg") no-repeat top left/100% 100%;
  transform: translateZ(100px);
}

.div2 {
  transform: translateZ(-100px) rotateY(180deg);
  background: url("../assets/image/2.jpg") no-repeat top left/100% 100%;
}

.div3 {
  background: url("../assets/image/3.jpg") no-repeat top left/100% 100%;
  transform: translateY(-100px) rotateX(90deg);
}

.div4 {
  background: url("../assets/image/4.png") no-repeat top left/100% 100%;
  transform: translateY(100px) rotateX(-90deg);
}

.div5 {
  transform: translateX(-100px) rotateY(-90deg);
  background: url("../assets/image/5.jpg") no-repeat top left/100% 100%;
}

.div6 {
  background: url("../assets/image/6.jpg") no-repeat top left/100% 100%;
  transform: translateX(100px) rotateY(90deg);
}
</style>